import React, { useEffect, useState } from 'react'

// 需求：一上来就让 count 倒计时
export default function App() {
  // 倒计时变量 count
  const [count, setCount] = useState(10)

  // 问题：每次任何状态变化，就会导致开启定时器，会有好多个定时器来控制 count
  /* setInterval(() => {
    setCount(count - 1)
  }, 1000) */
  /* // !解决：只期望定时器开启一次，模拟 componentDidMount
  // !新问题：数值永远是 9，没有倒计时的效果
  // !原因是什么呢？
  useEffect(() => {
    setInterval(() => {
      console.log(1) // 定时器确实在执行
      setCount(count - 1)
    }, 1000)
  }, []) */

  /* // !原因解释
  useEffect(() => {
    setInterval(() => {
      // 这里产生了闭包，就导致这个 count，永远永远是你开启定时器一刹那时候的那个 count
      console.log(count) // 永远是 10
      setCount(count - 1)
    }, 1000)
  }, []) */

  // !关键怎么解决？setCount((count) => count - 1) 不会形成闭包啦
  useEffect(() => {
    setInterval(() => {
      // setCount(count - 1)
      // setCount(() => count - 1)
      // debugger
      setCount((count) => count - 1)
    }, 1000)
  }, [])
  return (
    <div>
      <h3>count: {count}</h3>
    </div>
  )
}
